<template>
   <div class="top">
        <div class="center">
            <div class="img-box"><img :src="this.data.img_url.url" alt=""></div>
            <div class="word">
                <h1 class="name">
                    {{this.data.name}}
                    <span class="btn1"><img src="@/assets/design/design-btn.png" alt=""></span>
                </h1>
                <p class="work">
                    <span>{{this.data.work}}</span>
                    <span class="years">设计经验：{{this.data.years}}年</span>
                </p>
                <p class="work-number">
                    <span>设计作品：{{this.data.work_number}}套</span >
                    <span class="sale_number">签约单数：{{this.data.sale_number}}单</span>
                </p>
                <p class="filed">擅长设计领域：{{this.data.filed}}</p>
                <p class="style">擅长设计风格：{{this.data.style}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'top',
  data () {
    return {
  
     
    }
  },
  props:{
      data:Object
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    // console.log(this.baseUrl)
   
    
  },
  methods: {
   
  },
}
</script>

<style lang="stylus" scoped>
@import "~@styles/varibles.styl"
@import "~@styles/mixins.styl"
img 
    width 100%
p 
    color #333333
.top 
    background white
    overflow hidden
.center 
    overflow hidden
    width 94%
    margin 3%
    background #f2f2f2
    .img-box
        width 1.8rem
        // height 2.4rem
        overflow hidden
        margin 0.2rem
        float left
    .word 
        margin-top 0.2rem
        float left
        width 4.5rem
        margin-right 0.2rem
.name 
    font-size 0.3rem 
    color #333333
.btn1
    float right
    width 1.6rem
.work 
    margin-top 0.2rem
.years,.sale_number 
    margin-left 0.4rem
.work-number,.filed,.style
    margin-top 0.2rem
</style>
